import React from 'react';
import { connect } from 'react-redux';
import loginSelector from '../selectors/loginSelector'
import {fetch_userinfo} from "../actions/login";
import Index from '../components/index'
import {isBrowserEnvi} from '../tools'

@connect(
    loginSelector,
)
export default class loginContainer extends React.Component {
    static propTypes = {
        isLogin: React.PropTypes.bool.isRequired,
        isLogining: React.PropTypes.bool.isRequired
    };
    componentWillMount(){
        if(isBrowserEnvi()){
            console.log("-------nodejs前端环境-----");
        }else{
            console.log("-------nodejs后端环境-----");
            //TODO 通过后端可以fetch一些记录，fetch后通过dispatch改变state来改变组件的props完成后端渲染
        }
    }
    componentDidMount(){
        this.props.dispatch(fetch_userinfo(this.props.isLogin));
    }
    componentWillUpdate(nextProps, nextState){
        if(this.props.isLogin!=nextProps.isLogin){
            this.props.dispatch(fetch_userinfo(nextProps.isLogin));
        }
    }

    render() {
        const { isLogin,user,userinfo } = this.props;
        return (
            <Index username={user.username}>
                {
                    isLogin
                    ?
                    <div>
                        你(<span className="am-text-success">{user.username}</span>)可以使用 本网址的功能
                        <p>ajax请求（只在登录时有返回）：{userinfo}</p>
                    </div>
                    :
                    <div>
                        你还未登录,请先登录, 方可使用相关功能
                    </div>
                }
            </Index>
        )
    }
}